<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="0">
    <title>全国城市海选报名</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link href="__STATIC__/webapp/css/mui.min.css" rel="stylesheet"/>
    <link href="__STATIC__/webapp/css/from.css" rel="stylesheet"/>
    <script type="text/javascript" src="__STATIC__/webapp/js/jquery-1.11.0.js"></script>
    <script src="__STATIC__/webapp/js/mui.js"></script>
    <link href="__STATIC__/webapp/js/dialog/dialog.css" type="text/css" rel="stylesheet">
    <script src="__STATIC__/webapp/js/dialog/dialog.js"></script>
    <script src="__STATIC__/webapp/js/confirm.js"></script>
    <script src="__STATIC__/webapp/js/city.data-3.js"></script>
    <link href="__STATIC__/webapp/js/picker_mui/picker.css" rel="stylesheet"/>
    <link href="__STATIC__/webapp/js/picker_mui/mui.picker.min.css" rel="stylesheet"/>

    <script src="__STATIC__/webapp/js/picker_mui/mui.picker.js"></script>
    <script src="__STATIC__/webapp/js/picker_mui/mui.poppicker.js"></script>
    <script src="__STATIC__/webapp/js/picker_mui/mui.picker.min.js"></script>
    {include file="public/weixin_sdk" /}
</head>
<body>

<a href="{:url('webapi/user/user_center')}">
    <header id="mui-color" style="background: #242736" class="mui-bar mui-bar-nav">
        <div class="mui-icon  mui-icon-left-nav mui-pull-left lotteryBack"></div>
        <h1 class="mui-title">2018亚洲新人赛上海赛区资料补充</h1>
    </header>
</a>


<style type="text/css">
    body {
        background: #FFFFFF;
    }

    header.mui-bar {
        background-color: #242736;
        color: #FFF;
    }

    header.mui-bar .mui-title {
        color: #FFF;
        font-size: 15px;
    }

    div.mui-input-row p.con {
        line-height: 1.7;
    }

    ul.mInfo li {
        line-height: 2.2;
        margin-left: -25px;
        border-bottom: 1px solid #F2F2F2;
        height: 30px;
    }

    ul.mInfo li:last-child {
        border: none;
    }

    input#btn {
        position: absolute;
        z-index: 2;
        top: 4px;
        right: 25px;
        font-size: 12px;
        background: #F25F31;
        width: 85px;
        padding: 0 5px;
        height: 28px;
        color: #FFF;
        border-radius: 5px;;
    }

    .mui-input-group:before {
        height: 0;
    }

    .okBtn {
        border: none;
        width: 250px;
        height: 37px;
        margin: 0 auto;
        display: block;
        margin: 10px auto 30px auto;
    }
</style>

<div class="mui-content">
    <div class="mui-content-padded" style="margin:0 5px;">


        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-collapse">
                <a class="mui-navigate-right" href="#">基本信息</a>

                <div class="mui-collapse-content">
                    <ul class="mInfo">
                        <li>姓名:{$vo.name}</li>
                        <li>性别:{$vo.sex}</li>
                        <li>身份证号码:{$vo.identity_num}</li>
                        <li>手机号码:{$vo.phone_num}</li>
                        <li>参赛形式:{$vo.join_type}</li>
                        <li>是否有乐器:{$vo.is_possess_music}</li>
                        <li>是否有原创:{$vo.is_original}</li>
                        <li>参赛种类:{$vo.join_kind}</li>
                    </ul>

                </div>
            </li>
        </ul>

        <form class="mui-input-group">
            <div style="padding:5px;">
                <h5 class="mui-content-padded">个人信息补充:</h5>
            </div>

            <div class="mui-input-row">
                <label>出生日期</label>
                <input type="text" id="showBirthday" data-options='{"beginYear":1933,"endYear":2018,"type":"date"}'
                       class="mui-input-clear" readonly placeholder="请选择出生日期">
            </div>

            <div class="mui-input-row" style="position: relative;">
                <label>身高</label>
                <input type="text" id="height" readonly class="mui-input-clear" placeholder="请选择您的身高"/>
                <span id="cm" class="hidden" style="position: absolute; left:42%; top:10px;">cm</span>
            </div>

            <div class="mui-input-row" style="position: relative;">
                <label>体重</label>
                <input type="text" id="weight" readonly class="mui-input-clear" placeholder="请选择您的体重"/>
                <span id="kg" class="hidden" style="position: absolute; left:42%; top:10px;">kg</span>
            </div>


            <div class="mui-input-row">
                <label>单位</label>
                <input type="text" id="unit" class="mui-input-clear" placeholder="请输入您的单位/学校名称">
            </div>

            <div class="mui-input-row">
                <label>名族</label>
                <input type="text" readonly id="nationality" placeholder="请选择名族">
            </div>

            <div class="mui-input-row">
                <label>兴趣爱好</label>
                <input type="text" id="like" placeholder="多个请以逗号隔开&nbsp;例如：唱歌,跳舞">
            </div>


            <div class="mui-input-row">
                <label>所在城市</label>
                <input type="text" id="showCityPicker3" readonly class="mui-input-clear" placeholder="请选择所在城市">
            </div>


            <div class="mui-input-row">
                <label>家庭住址</label>
                <input type="text" id="address" class="mui-input-clear" placeholder="请输入家庭住址">
            </div>

            <div class="mui-input-row">
                <label>紧急联系人</label>
                <input type="text" class="mui-input-clear" id="urgency" placeholder="紧急联系人的电话号码">
            </div>

            <div style="padding: 5px;">
                <h5 class="mui-content-padded">参赛者信息补充:</h5>
            </div>

            <div class="mui-input-row">
                <label>是否签约经纪</label>

                <div style="display: inline-block;" class="mui-input-row mui-radio">
                    <input value="1" checked name="broker" type="radio">
                    <label style="padding-right: 50px;">是</label>
                </div>

                <div style="display: inline-block;" class="mui-input-row mui-radio">
                    <input value="0" name="broker" type="radio">
                    <label style="padding-right: 50px;">否</label>
                </div>
            </div>

            <div class="mui-input-row" style="margin: 10px 5px; height: 86px; overflow: hidden;">
                <label>参赛经历</label>
                <textarea id="joinExperience" style="border: 1px solid #C6C6C6;" placeholder="参赛经历为选填项..."></textarea>
            </div>

            <div class="mui-input-row" style="margin: 10px 5px; height: 86px; overflow: hidden;">
                <label>获奖经历</label>
                <textarea id="gainAward" style="border: 1px solid #C6C6C6;" placeholder="获奖经历为选填项..."></textarea>
            </div>


            <div class="mui-button-row">
                <button type="button" class="mui-btn mui-btn-primary okBtn" onclick="checkForm(this);">确认</button>
            </div>
        </form>

    </div>
</div>

<script type="text/javascript">


    var cData = null;

    (function ($, doc) {
        $.init();
        $.ready(function () {
            /**
             * 获取对象属性的值
             * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
             * @param {Object} obj 对象
             * @param {String} param 属性名
             */
            var _getParam = function (obj, param) {
                return obj[param] || '';
            };

            /**
             * 体重选择
             */
            var weightPicker = new $.PopPicker();
            weightPicker.setData(wiegiht);
            var weight = doc.getElementById('weight');
            weight.addEventListener('tap', function (event) {

                weightPicker.show(function (items) {
                    weight.value = items[0].text;
                    jQuery("#kg").show();
                });
            }, false);


            /**
             * 出生年月日选择
             */
            var birthday = doc.getElementById('showBirthday');
            birthday.addEventListener('tap', function () {
                var optionsJson = this.getAttribute('data-options') || '{}';
                var options = JSON.parse(optionsJson);
                var id = this.getAttribute('id');
                /*
                 * 首次显示时实例化组件
                 * 示例为了简洁，将 options 放在了按钮的 dom 上
                 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
                 */
                var picker = new $.DtPicker(options);
                picker.show(function (rs) {
                    birthday.value = rs.text;
                    picker.dispose();
                });
            }, false);


            /**
             * 身高选择
             */
            var heightPicker = new $.PopPicker();
            var height = doc.getElementById('height');
            heightPicker.setData(arr);
            height.addEventListener('tap', function (event) {
                heightPicker.show(function (items) {
                    height.value = items[0].text;
                    jQuery("#cm").show();
                });
            }, false);

            /**
             * 名族选择
             */
            var nationalityPicker = new $.PopPicker();
            var nationality = doc.getElementById('nationality');
            nationalityPicker.setData(nations);
            nationality.addEventListener('tap', function (event) {
                nationalityPicker.show(function (items) {
                    nationality.value = items[0].text;
                });
            }, false);


            /**
             * 城市选择，三级联动
             */
            var cityPicker3 = new $.PopPicker({
                layer: 3
            });
            cityPicker3.setData(cityData3);
            var showCityPickerButton = doc.getElementById('showCityPicker3');
            var cityResult3 = doc.getElementById('cityResult3');
            showCityPickerButton.addEventListener('tap', function (event) {
                cityPicker3.show(function (items) {
                    showCityPickerButton.value = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');

                    cData = {
                        province: _getParam(items[0], 'text'),
                        city: _getParam(items[1], 'text'),
                        county: _getParam(items[2], 'text'),
                    }
                });
            }, false);

        });
    })(mui, document);


    function checkForm() {
        var showBirthday = $("#showBirthday").val();
        var height = $("#height").val();
        var weight = $("#weight").val();
        var unit = $("#unit").val();
        var nationality = $("#nationality").val();

        var like = $("#like").val();
        var address = $("#address").val();
        var urgency = $("#urgency").val();

        var is_broker = $("input[name='broker']:checked").val(); //是否签约
        var joinExperience = $("#joinExperience").val();
        var gainAward = $("#gainAward").val();

        var data = {
            form:'user_form1',
            birthday: showBirthday,
            height: height,
            weight: weight,
            unit: unit,
            like: like,
            nationality: nationality,
            address: address,
            urgency: urgency,
            is_broker: is_broker,
            joinExperience: joinExperience,
            gainAward: gainAward,
            area: cData
        };

        //提交表单
        var updateForm = "{:url('webapi/user/update_form')}";
        $.post(updateForm, data ,function (res) {
            console.log(res);
            mui.toast(res.msg);
            $(_this).text('确认').css({"background": '#FF6C3C'});
            if(res.status == 200){
                //TODO 保存成功操作
                var url = "{:url('webapi/lottery/index')}?type=1";
                window.location.href = url;
            }
        });
        console.log(data);
    }


</script>

{include file="public/weixin_share" /}
</body>
</html>